<template>
	<!-- 进港预约 -->
	<view class="container">
		<view class="headForm">
			<u-form :model="form" ref="uForm" label-width="120px">
				<u-form-item label="* 运输车号:" prop="carcode">
					<u-input v-model="form.carcode" placeholder="请输入运输车号"/>
				</u-form-item>
				
				<u-form-item label="* 物流公司:" prop="truckname">
					<u-input v-model="form.truckname" placeholder="请输入物流公司"/>
				</u-form-item>
				
				<u-form-item label="* 司机姓名:" prop="drivername">
					<u-input v-model="form.drivername" placeholder="请输入司机姓名"/>
				</u-form-item>
				
				<u-form-item label="* 司机电话:" prop="drivertel">
					<u-input v-model="form.drivertel" placeholder="请输入司机电话"/>
				</u-form-item>
				
				<u-form-item label="* 车架号:" prop="carframeno" >
					<u-button  :custom-style="customTimeStyle" @click="qcrClick">{{ text }}</u-button>
				</u-form-item>
				
				<u-form-item label="箱号:" prop="cntr">
					<u-input v-model="form.cntr" placeholder="请输入箱号"/>
				</u-form-item>
				
				<u-form-item label="铅封号:" prop="sealno">
					<u-input v-model="form.sealno" placeholder="请输入封号"/>
				</u-form-item>
				
				<u-form-item label="流向:" prop="cargoflowto">
					<u-input v-model="form.cargoflowto" placeholder="请输入流向"/>
				</u-form-item>
				
				<u-form-item label="车型" prop="brand">
					<u-input v-model="form.brand" placeholder="请输入车型"/>
				</u-form-item>
				
				<u-form-item label="颜色" prop="color">
					<u-input v-model="form.color" placeholder="请输入颜色"/>
				</u-form-item>
				
				<u-form-item label="工具数量" prop="toolnum">
					<u-input v-model="form.toolnum" placeholder="请输入工具数量"/>
				</u-form-item>
				
				<u-form-item label="备胎" prop="sparewheelnum">
					<u-input v-model="form.sparewheelnum" placeholder="请输入备胎"/>
				</u-form-item>
				
				<u-form-item label="钥匙" prop="keynum">
					<u-input v-model="form.keynum" placeholder="请输入钥匙"/>
				</u-form-item>
				
				<u-form-item label="是否残损" prop="isdamaged">
<!-- 					<u-input v-model="form.isdamaged" placeholder="是否残损"/> -->
					<u-input  type="select" :select-open="partListShow" v-model="form.isdamagedName"
					placeholder="是否残损" @click="partListShow = true"/>
				</u-form-item>
				
				<u-form-item label="备注" prop="memo">
					<u-input v-model="form.memo" placeholder="请输入备注"/>
				</u-form-item>
				
				<u-button shape="square" type="success" :custom-style="customStyle" @click="selectInfo">查询</u-button>
				
				<u-button shape="square" type="success" :custom-style="customStyle" @click="submit">保存</u-button>
			</u-form>
		</view>
		
		<u-select mode="single-column" :list="partList" v-model="partListShow" @confirm="partListConfirm"
			value-name="value" label-name="name">
		</u-select>
	
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				customStyle: {
					marginTop: '20px',
				},
				customTimeStyle: {
					height: '60rpx',
				},
				text: '点击扫描车架号',
				height: 100,
				partListShow: false,
				partList: [
					{ value: 0, name: '否' },
					{ value: 1, name: '是'  },
				],
				// table 表单
				form: {
					toolnum: 0,
					sparewheelnum: 0,
					isdamaged: 0,
					isdamagedName: '否',
					keynum: 0,
					memo: '',
					color: '',
					cargoflowto: '',
					brand: '',
					sealno: '',
					cntr: ''
				},
				defaultTime: '',		// 默认时间
				somethingList: [
					{ value: '工作交流' },
					{ value: '拜访' },
					{ value: '施工' },
					{ value: '送货'},
					{ value: '上级检查' },
					{ value: '参观'},
					{ value: '其他' }
				],
				// 非真实地址-上传的地址
				action: 'https://api.zlkj-port.com/cygjapi/App/fileUpload',
				id: 0,		// 图片id
				rules: {
					carcode: [ { required: true, message: '运输车号不能为空' } ],
					truckname: [ { required: true, message: '物流公司不能为空' } ],
					drivername: [ { required: true, message: '司机姓名不能为空' } ],
					drivertel: [ { required: true, message: '司机电话不能为空' } ],
					carframeno: [ { required: true, message: '车架号不能为空' } ],
				},
				file1path: '',
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			qcrClick() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('扫描二维码成功,结果:' + res.result)
						if (res.result) {
							this.form.carframeno = res.result
							this.text = res.result
						}
					},
					error: (res) => {
						console.log('扫描二维码出现错误')
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if(valid) {	
						// 勾选了协议进行提交操作
						uni.request({
							url: 'https://api.zlkj-port.com/DF-JG/xhtt/A/NyiAhStsL0cJmUk' +
								'?carcode=' + this.form.carcode +
								'&truckname=' + this.form.truckname +
								'&drivername=' + this.form.drivername +
								'&drivertel=' + this.form.drivertel +
								'&cargoflowto=' + this.form.cargoflowto +
								'&carframeno=' + this.form.carframeno +
								'&brand=' + this.form.brand +
								'&color=' + this.form.color +
								'&toolnum=' + this.form.toolnum +
								'&sparewheelnum=' + this.form.sparewheelnum +
								'&keynum=' + this.form.keynum +
								'&isdamaged=' + this.form.keynum +
								'&memo=' + this.form.memo +
								'&sealno=' + this.form.sealno + 
								'&cntr=' + this.form.cntr,
							method: "get",
							success: (res) => {
								this.$refs.uTips.show({
									title: '预约成功！',
									type: 'success',
									duration: '2500'
								})
								this.text = '点击扫描车架号'
								this.form = {
									carcode: this.form.carcode,
									truckname: this.form.truckname,
									drivername: this.form.drivername,
									drivertel: this.form.drivertel,
									cargoflowto: this.form.cargoflowto,
									sealno: this.form.sealno,
									cntr: this.form.cntr,
									toolnum: 0,
									sparewheelnum: 0,
									isdamaged: 0,
									isdamagedName: '否',
									keynum: 0,
									memo: '',
									color: '',
									cargoflowto: '',
									brand: ''
								}
							}
						})
					}
				})
			},
			selectInfo() {
				if(!this.form.carcode) {
					this.$refs.uTips.show({
						title: '车号不能为空！',
						type: 'warning',
						duration: '2500'
					})
					return
				}
				uni.navigateTo({
					url: './selectInfo?carcode=' + this.form.carcode
				})
			},
			// 时间确认按钮
			confirm(val) {
				this.form.time = val.year + '-' + val.month + '-' + val.day + ' ' + val.hour + ':' + val.minute
				console.log(this.form.time)
			},
			// 预约事由确认按钮
			somethingConfirm(val) {
				this.form.something = val[0].value
				console.log(this.form.something)
			},
			partListConfirm(val) {
				console.log(val)
				this.form.isdamagedName = val[0].label
				this.form.isdamaged = val[0].value
				console.log(this.form.isdamaged)
			},
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .u-form-item__body {
	background-color: rgba(255, 255, 255, 1);
	margin: 0px 10rpx;
	border-radius: 20rpx;
}
::v-deep .u-form-item {
	padding: 15rpx !important;
}
::v-deep view, text {
	padding-left: 5rpx;
}
.container {
	// height: 100%;
	background-color: rgba(245, 245, 245, 1);
}
.headForm {
	padding: 10rpx;
}
.custom-form-item {
  height: 60px !important;
}
.underline {
	text-decoration: underline;
	color: blue;

}
</style>
